<template>
	<view class="box">

		<unicloud-db style="background-color: #fff; padding: 10rpx; border-radius: 15rpx;" ref="udb"
			v-slot:default="{data, loading, error, options}" :options="options" :collection="collectionList"
			field="name,code,price,size,address,color,img,imgList,imgListDetails" :where="queryWhere" :getone="true"
			:manual="true">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="loading">
				<uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
			</view>
			<view v-else-if="data">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item style="height: 100%;" class="swiperItem" v-for="(item,index ) in data.imgList"
						:key="index">
						<image class="image" :src="item.url" mode="scaleToFill"></image>
					</swiper-item>

				</swiper>
				<view class="title lienh">
					{{data.name}}
				</view>
				<!-- {{data.color}} -->
				<view class="lienh jingangqu">
					<view class="">
						质量无忧
					</view>
					<view class="">
						全场包邮
					</view>
					<view class="">
						极速发货
					</view>
					<view class="">
						极速退款
					</view>
				</view>

				<view class="">
					<view class="" v-for="el in data.imgList">
						<image :src="el.url" style="width: 100%;" mode="widthFix"></image>
					</view>
				</view>
				<unipop ref="popup" type="bottom">
					<view class="popupBox">
						<view class="popupAddress" style="padding-left: 20rpx;" @click="selectLocton">

							<view class="">
								{{addres.name}}
							</view>
							<view class="" style="color: #707070; font-size: 28rpx;">
								<view class="">
									{{addres.address ? addres.address: '请选择地址' }}
								</view>
							</view>
							<view class="">
								<view class="" style="font-size: 24rpx;">
									{{addres.mobile }}
								</view>
							</view>
						</view>
						<view class="popitem">


							<view class="">
								<image style="width: 150rpx;  height: 150rpx; border-radius: 10rpx;" :src="data.img.url"
									mode=""></image>

							</view>
							<view class="" style="padding-left: 15rpx;">
								<input type="text"
									style="background-color: #f1f1f1; padding: 10rpx 20rpx; margin-right: 15rpx; "
									placeholder="输入颜色" placeholder-style="color:#797979;font-size:24rpx; padding:10rpx;"
									v-model="colorV" />
							</view>
							<view class="">
								<uv-number-box v-model="num"></uv-number-box>
							</view>
						</view>
						<view class="" style="color: #414141;font-size: 24rpx;">
							{{data.color}}
						</view>
						<view class="opoupButtom" @click="createOrder">
							创建订单
						</view>
					</view>
				</unipop>
				<view class="bottomBtn">
					<view class="bottomBtnBox">
						<view class="price">
							￥{{data.price}}
						</view>
						<view class="bottomBtnLeft">
						</view>
						<view class="bottomBtnRight" @click="gomai">
							直购
						</view>
					</view>
				</view>
				<view class="" style="height: 180rpx;">
					<view class="">

					</view>
				</view>
			</view>

		</unicloud-db>
	</view>
</template>

<script>
	// 由schema2code生成，包含校验规则和enum静态数据
	import {
		enumConverter
	} from '../../js_sdk/validator/index.js'
	const db = uniCloud.database()
	import unipop from '../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				colorV: '',
				queryWhere: '',
				collectionList: "index",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				num: 1,
				options: {
					// 将scheme enum 属性静态数据中的value转成text
					...enumConverter
				},
				addres: {
					"_id": "",
					"is_default": false,
					"name": "",
					"alias": "",
					"mobile": "",
					"area_code": "",
					"address": "",
					"email": ""
				}
			}
		},
		components: {
			unipop
		},
		onLoad(e) {
			this._id = e.id
		},
		onShow() {
			this.setLoction()
		},
		onReady() {
			if (this._id) {
				this.queryWhere = '_id=="' + this._id + '"'
			}
		},
		methods: {

			async createOrder() {
				if (!this.addres._id) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none'
					})
					return
				}
				let data = {
					orderState: '0',
					// 数量
					num: this.num,
					// 商品颜色
					color: this.colorV,
					// 商品
					orderId: this._id,
					// 地址
					addres: this.addres
				}
				let flg = false
				let list = Object.keys(data)
				for (var i = 0; i < list.length; i++) {
					if (!data[list[i]]) {
						uni.showToast({
							title: '信息填写不完整',
							icon: 'none'
						})
						flg = true
						return
					} else {
						flg = false
					}
				}

				if (!flg) {
					const res = await uniCloud.importObject('order').createdOrder(data)
				}
			},
			async setLoction() {
				let id = uni.getStorageSync('selectAddress')
				if (id) {
					const res = await uniCloud.importObject('Loction').selectAction(id)
					if (res.code == 200) {
						this.addres = res
					}
				}

			},
			selectLocton() {
				uni.navigateTo({
					url: '/pages/uni-id-address/list?flg=' + true
				})
			},
			gomai() {
				if (uni.getStorageSync('userInfor')) {
					this.$refs.popup.open()


				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			handleUpdate() {
				// 打开修改页面
				uni.navigateTo({
					url: './edit?id=' + this._id,
					events: {
						// 监听修改页面成功修改数据后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			},
			handleDelete() {
				this.$refs.udb.remove(this._id, {
					success: (res) => {
						// 删除数据成功后跳转到list页面
						uni.navigateTo({
							url: './list'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		padding: 15rpx;
		background-color: #eeeeee;

		.image {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
		}

		.swiper {
			height: 700rpx;

		}

		.title {
			font-weight: 600;
			color: #565656;
		}
	}

	.price {
		color: red;
		font-size: 36rpx;
		font-weight: 600;
	}

	.bottomBtn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0rpx 0rpx 20px #cecece;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;


		.bottomBtnBox {
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			padding-right: 20rpx;
			height: 100%;

			.bottomBtnLeft {
				flex: 1;
			}

			.bottomBtnRight {
				// border: 3rpx solid #ffff22;
				width: 200rpx;
				box-shadow: 6rpx 5rpx 20rpx rgb(255, 172, 29);
				background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24));
				font-weight: 600;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 18rpx;
				text-align: center;
				border-radius: 40rpx;
			}
		}
	}

	.lienh {
		margin-top: 10rpx;
		margin-bottom: 15rpx;
	}

	.jingangqu {
		display: flex;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		border-radius: 20rpx;
		justify-content: space-around;

		>view {
			padding: 15rpx 15rpx;
			border-radius: 10rpx;
			font-weight: 600;
			color: #fff;
			font-size: 28rpx;
			background-image: linear-gradient(40deg, rgba(245, 45, 5, 1.0), rgb(255, 205, 30));
		}
	}

	.popupBox {
		background-color: #fff;
		padding: 15rpx 40rpx;
		min-height: 300rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.popitem {
			display: flex;
			align-items: center;
			// background-color: red;
		}

		.opoupButtom {
			background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
			padding: 20rpx 20rpx;
			text-align: center;
			color: #fff;
			margin-top: 30rpx;
			border-radius: 40rpx;
		}

		.popupAddress {
			display: flex;
			justify-content: space-between;
			min-height: 100rpx;
			align-items: center;
			position: relative;
		}

		.popupAddress::after {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			content: '';
			width: 6rpx;
			height: 30rpx;
			background-color: #de2935;
		}
	}
</style>